<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>员工列表</title>
    <script src="js/jquery.min.js" type="text/javascript"></script>
    <script>
        function employeeLists(pageIndex, pageSize) {
            $.ajax({
                url: "/java_web/employeeList",//请求名称
                data: {pageIndex: pageIndex, pageSize: pageSize},
                type: "get",
                async: true,//异步请求，默认就是异步请求
                dataType: "json",//如果返回的是简单类型，添加text，如果返回的是对象，集合也就是json数据
                success: function (data) {
                    let i;
                    var head = "<tr>\n" +
                        "        <th>工号</th>\n" +
                        "        <th>名字</th>\n" +
                        "        <th>性别</th>\n" +
                        "        <th>生日</th>\n" +
                        "        <th>结婚状态</th>\n" +
                        "        <th>操作</th>\n" +
                        "    </tr>"
                    const employees = data.data;
                    for (let i = 0; i < employees.length; i++) {
                        head += "<tr>\n" +
                            "        <td>" + employees[i].id + "</td>\n" +
                            "        <td>" + employees[i].name + "</td>\n" +
                            "        <td>" + employees[i].gender + "</td>\n" +
                            "        <td>" + employees[i].birthday + "</td>\n" +
                            "        <td>" + employees[i].wedlock + "</td>\n" +
                            "        <td><a href='/java_web/deleteEmployee?id=" + employees[i].id + "'>删除</a></td>\n" +
                            "        <tr/>"
                    }
                    $("#employeeList").html(head)
                    // var page ="<a href='/java_web/employeeList?pageIndex=1&pageSize=10'>首页</a>"
                    let page = "<a href='#'onclick='employeeLists(1," + data.pageSize + ")'>首页</a>";
                    if (data.pageIndex != 1) {
                        page += "<a href='#'onclick='employeeLists(" + (data.pageIndex - 1) + "," + data.pageSize + ")'>上一页</a>"
                    }
                    for (i = data.firstPage; i <= data.lastPage; i++) {
                        page += "<a href='#'onclick='employeeLists(" + i + "," + data.pageSize + ")'>  " + i + "  </a>"
                    }
                    if (data.pageIndex != data.lastPage) {
                        page += "<a href='#'onclick='employeeLists(" + (data.pageIndex + 1) + "," + data.pageSize + ")'>下一页</a>"
                    }
                    page += "<a href='#'onclick='employeeLists(" + data.pageCount + "," + data.pageSize + ")'>尾页</a>【" + data.pageIndex + "/" + data.pageCount + "】"
                    const obj = document.getElementsByTagName("option");
                    for (i = 0; i < obj.length; i++) {
                        if (obj[i].value == data.pageSize) {
                            obj[i].selected = true;
                        }
                    }
                    $("#page").html(page)
                    $(".pageSize").change(function () {
                        var pageSize = $(".pageSize").val()
                        employeeLists(pageIndex, pageSize)
                    })
                }

            })
        }


        $(function (pageIndex, pageSize) {
            console.log(pageIndex, pageSize)
            if (pageIndex == null || pageSize == null) {
                employeeLists(1, 10)
            } else {
                employeeLists(pageIndex, pageSize)
            }

        });


    </script>
</head>
<body>
<a href="welcome.html">返回欢迎页面</a><br/>
<table border="1" id="employeeList" name="employeeList">
</table>
<div>
<span id="page">
</span>
    <span>
        <select class="pageSize">
             <option value="5">5</option>
             <option value="10">10</option>
             <option value="15">15</option>
             <option value="20">20</option>
        </select>
    </span>
</div>
</body>
</html>
